<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../static/css/common.css">
    <link rel="stylesheet" href="../static/css/index.css">
    <title>纸牌游戏</title>
</head>

<body>
    <div class="mask">
        <h2 class="play_name">纸牌游戏</h2>
        <form id="form" action="" onsubmit="return false">
            <div class="input_text"><input type="text" class="id_num" placeholder="请输入学号"></div>
            <div><button class="btn">确定</button></div>
        </form>
    </div>
    <header class="header clearFixed">
        <div class="playbar">
            <div class="sideBar fl">游戏
                <img class="icon fr" src="../static/img/tab_bottom.png" alt="">
            </div>
            <div class="checkpoint fl">第1关</div>
            <button class="submit fr">提交</button>
            <button class="back fr">回退</button>
            <div class="student_id fr">学号：<span class="userNum">123</span></div>
            <div class="fr">金币数：<span class="gold_coins">500</span></div>


            <ul class="ulList">
                <li><a href="#" class="restart">重新开始</a></li>
                <li class="point"><a href="#">游戏提示</a></li>
                <!-- <li><a href="#">购买金币</a></li>
                <li><a href="#">查看纸牌结构</a></li> -->
            </ul>
        </div>

        <!-- <div class="fr clearFixed">11
            <div class="gold_coins fl">金币数：1111</div>
            <div class="student_id fl">学号：123</div>
        </div> -->
    </header>
    <div class="container">
        <div class="success">
            <div>您已成功通关！<br>获得了100金币的奖励</div>
            <div><button class="again">再来一次</button><button class="next">下一关</button></div>
        </div>
        <div class="allCard">
            <div>恭喜您获得了一张万能卡牌，使用该张牌可用于回收桌牌区的任意一张纸牌</div>
            <div><button class="sure">确定</button></div>
        </div>
        <div class="continue">
            <div class="coin_content">您当前已无法回收桌牌区的任意纸牌，是否选择耗100金币随机兑换5张纸牌？</div>
            <div><button class="cancle">重新开始</button><button class="exchange">确定</button><button
                    class="next1">下一关</button>
            </div>
        </div>
        <div class="state">
            游戏提示：<br>用户可从顶部桌牌区点击回收与底部收牌区相邻的纸牌到收牌区，相邻指的按顺序该纸牌是收牌区的牌的
            上一张或者下一张，比如收牌区掀开的纸牌是10，则可以回收桌牌区的9和J。其中K的下一张是A。当桌牌区的所有牌被收走后游戏通关，
            无法再回收桌牌区的纸牌时用户可选择掀开收牌区的盖牌。<br>用户退出游戏时记得点击右上方的提交按钮将数据提交到后台。<button class="hide">隐藏</button></div>
    </div>
    </div>
    <div class="bottom"></div>
    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
    <script src="../static/js/axios.min.js"></script>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> -->
    <script type="module" src="../static/js/index.js">

    </script>
</body>

</html>